<script>
  import $ from 'dfish-widget'
  import Widget from '../Widget.vue'
  import Pickbox from './Pickbox.vue'

  export default {
    mixins: [Pickbox],
    data() {
      return {
        name: 'Combobox',
        remark: '可输入的有候选项的表单',
        deprecate: '',
				attrs: [{
          name: 'clearable',
          type: 'Boolean',
          remark: '是否可以清空',
          option: '',
        },{
          name: 'strict',
          type: 'Boolean',
          remark: '是否严格匹配模式。设为false，可以提交没有匹配的文本。',
          option: '设为false时，modelValue只要设置text属性，不要设置value属性。',
          default: 'true'
        }],
        events: [{
          name: 'input',
          remark: '手动输入时触发',
          option: '(event: Event, value: String)<div>可通过<var>event.value</var>获取value值</div>',
          default: ''
        }, {
          name: 'click:item',
          remark: '点击已选项时触发',
          option: '(event: Event, value: Object)<div>可通过<var>event.value</var>获取value值</div>',
          default: ''
        }, {
          name: 'keydown',
          remark: '按下按键时触发',
          option: '(event: Event)',
          default: ''
        }],
        methods: [{
          name: 'complete(item)',
          remark: '完成正在输入的内容，增加一个新的已选项',
          option: '<var>item</var>: Object 格式: <var>{value, text}</var>',
          default: '',
          return: 'this',
        }, {
          name: 'closeDrop()',
          remark: '关闭下拉选项窗口',
          option: '',
          default: '',
          return: 'this',
        }],
        examples: [{
          remark: '一次性加载的候选项数据',
          type: 'html',
          view: true,
          code: `
              <template>
                <w-combobox ref="box" :multiple="true" :picker="picker" :dropper="dropper" @input="suggest" :clearable="true" placeholder='尝试输入 "天" 字'>
                  <w-table :scroll-x="true">
                    <w-columns>
                      <w-column width="*"></w-column>
                      <w-column width="100"></w-column>
                    </w-columns>
                    <w-tbody>
                      <w-tr v-for="item in suggestList" :key="item.id" @click="clickAdd($event, item)">
                        <w-td>{{item.name}}</w-td>
                        <w-td>{{item.dept}}</w-td>
                      </w-tr>
                    </w-tbody>
                  </w-table>
                </w-combobox>
              </template>
              <${'script'}>
                export default {
                  data() {
                    return {
                      loading: false,
                      suggestList: [],
                      tableList: [{
                          id: '001',
                          name: '擎天柱',
                          dept: '史前地球'
                        },
                        {
                          id: '002',
                          name: '威震天',
                          dept: '塞伯坦星'
                        },
                        {
                          id: '003',
                          name: '大黄蜂',
                          dept: '塞伯坦星'
                        },
                      ]
                    }
                  },
                  methods: {
                    picker() {
                      alert('这里弹出选择窗口')
                    },
                    dropper() {
                      this.suggestList = this.tableList
                    },
                    suggest(event, value) {
                      this.suggestList = this.tableList.filter(v => v.name.includes(value))
                    },
                    clickAdd(event, item) {
                      this.$refs.box.complete({
                        value: item.id,
                        text: item.name
                      })
                      $.close(event)
                    },
                  }
                }
              </${'script'}>
            `,
						comp: {
							data() {
							  return {
							    loading: false,
							    suggestList: [],
							    tableList: [{
							        id: '001',
							        name: '擎天柱',
							        dept: '史前地球'
							      },
							      {
							        id: '002',
							        name: '威震天',
							        dept: '塞伯坦星'
							      },
							      {
							        id: '003',
							        name: '大黄蜂',
							        dept: '塞伯坦星'
							      }
							    ]
							  }
							},
							methods: {
							  picker() {
							    alert('这里弹出选择窗口')
							  },
							  dropper() {
							    this.suggestList = this.tableList
							  },
							  suggest(event, value) {
							    this.suggestList = this.tableList.filter(v => v.name.includes(value))
							  },
							  clickAdd(event, item) {
							    this.$refs.box.complete({
							      value: item.id,
							      text: item.name
							    })
							    $.close(event)
							  }
							}
						}
        }, {
          remark: '树形选项',
          type: 'html',
          view: true,
          code: `
              <template>
                <w-combobox ref="box" :multiple="true" :picker="picker" :dropper="dropper" @input="suggest" :clearable="true" placeholder='尝试输入 "市" 字'>
                  <w-tree :children="suggestList">
                    <template #default="{item}">
                      <w-leaf :key="item.id" :text="item.text" :children="item.children" :expanded="item.expanded" @click="clickLeaf($event, item)"
                        expandedIcon=".f-i .f-i-folder-open-full" collapsedIcon=".f-i .f-i-folder-full" icon=".f-i .f-i-file"></w-leaf>
                    </template>
                  </w-tree>
                </w-combobox>
              </template>
              <${'script'}>
                export default {
                  data() {
                    return {
                      suggestList: [],
                      treeList: [
                        {id: '10000', text: '福建省', expanded: true, children: [
                          {id: '10100', text: '福州市'},
                          {id: '10200', text: '厦门市'}
                        ]},
                        {id: '20000', text: '广东省', expanded: true, children: [
                          {id: '20100', text: '广州市'},
                          {id: '20200', text: '深圳市', children: [
                            {id: '20101', text: '福田区'},
                            {id: '20202', text: '罗湖区'}
                          ]}
                        ]},
                      ]
                    }
                  },
                  methods: {
                    picker() {
                      alert('这里弹出选择窗口')
                    },
                    dropper() {
                      this.suggestList = this.treeList
                    },
                    suggest(event, value) {
                      this.suggestList = this.search(this.treeList, value)
                    },
                    search(list, value) {
                      let rt = []
                      list.forEach(item => {
                        if (item.text.includes(value)) {
                          // 不显示children
                          const data = $.lodash.omit(item, 'children')
                          rt.push(data)
                        }
                        if (item.children && item.children.length) {
                          rt = rt.concat(this.search(item.children, value))
                        }
                      })
                      return rt
                    },
                    clickLeaf(event, item) {
                      this.$refs.box.complete({
                        value: item.id,
                        text: item.text
                      })
                      $.close(event)
                    }
                  }
                }
              </${'script'}>
            `,
						comp: {
							data() {
							  return {
							    loading: false,
							    suggestList: [],
                  treeList: [
                    {id: '10000', text: '福建省', expanded: true, children: [
                      {id: '10100', text: '福州市'},
                      {id: '10200', text: '厦门市'}
                    ]},
                    {id: '20000', text: '广东省', expanded: true, children: [
                      {id: '20100', text: '广州市'},
                      {id: '20200', text: '深圳市', children: [
                        {id: '20101', text: '福田区'},
                        {id: '20202', text: '罗湖区'}
                      ]}
                    ]},
                  ]
							  }
							},
							methods: {
							  picker() {
							    alert('这里弹出选择窗口')
							  },
							  dropper() {
							    this.suggestList = this.treeList
							  },
							  suggest(event, value) {
							    this.suggestList = this.search(this.treeList, value)
							  },
                search(list, value) {
                  let rt = []
                  list.forEach(item => {
                    if (item.text.includes(value)) {
                      // 不显示children
                      const data = $.lodash.omit(item, 'children')
                      rt.push(data)
                    }
                    if (item.children && item.children.length) {
                      rt = rt.concat(this.search(item.children, value))
                    }
                  })
                  return rt
                },
							  clickLeaf(event, item) {
							    this.$refs.box.complete({
							      value: item.id,
							      text: item.text
							    })
							    $.close(event)
							  }
							}
						}
        }]
      }
    },
    created() {
      this.merge([{
        name: 'picker',
        type: 'Function',
        remark: '显示一个操作图标。点击此图标触发设置的函数',
        default: ''
      }, {
        name: 'dropper',
        type: 'Function',
        remark: '显示一个下拉图标。点击此图标触发设置的函数',
        default: ''
      }, {
        name: 'model-value / v-model',
        type: 'Object / Array',
        remark: '表单值。多个值可用数组。值的格式: <var>{value, text, forbid}</var>',
        option: '<var>value</var>: (String)值, <var>text</var>: (String)文本, <var>forbid</var>: (Boolean)是否禁用'
      }, ], 'attrs')
    }
  }
</script>

<style>
</style>
